[HTML/CSS] 텍스트 들여쓰기, text-indent

문단을 처음 시작할때 맨 첫 시작 부분에 빈 여백을 남겨두는데 이 부분을 들여쓰기라고 합니다. CSS에는 들여쓰기를 가능하게 하도록 text-indent 속성을 제공하며 매우 간단하게 원하는 만큼 앞에 들여쓰기 공간을 줄 수 있습니다.

.test { text-indent: 100px; // 100px은 공백의 길이 }

물론 CSS의 text-indent 속성이 아닌 맨 처음 문구에 span등의 태그를 씌워서 margin-left 값을 주거나 padding 값을 주어도 똑같은 효과를 줄 수도 있겠죠. 하지만 이 속성을 사용한 방법이 가장 간단하고 빠른 방법입니다. 아래 예제를 참고하세요.




# text-indent 속성 예제보기 아래 예제는 text-indent를 사용하여 들여쓰기를 사용한 예제입니다.
@ indent.html

@ indent.css

아래는 들여쓰기에 따른 결과를 text-indent 미적용시와 비교한 모습입니다. 보시는 것처럼 위 문장은 스타일이 적용되어 들여쓰기가 되었습니다.

! text-indent 속성은 언제 사용할 수 있을까?

들여쓰기를 위해서 사용되지만 텍스트가 안보이게 할 경우에도 사용됩니다. 예를 들어 평소에는 텍스트를 보여주다가 text-indent를 사용해 -9999px 값을 주어 안보이도록 수정할 수 있니다.

이를 css에 사용하게 되면 inline 타입의 요소가 사라지게 될 것입니다. 이는 display값을 none을 준 것처럼 시아에서 사라지게 됩니다.

안보이게 하는 방법은 많겠지만 이 경우는 보통 텍스트와 이미지가 함께 쓰이는 경우에 사용할 수 있습니다. 방문자는 이미지가 보이나 소스상에서는 alt 형태로 텍스트 소스를 가질 수 있게됩니다. img 방식이 아닌 background 이미지의 경우 alt 속성이 없으므로 이 방식은 alt와 동일한 효과를 준다고 볼 수 있습니다.